<template>
  <transition name="bounce" mode="out-in">
    <section class="mui-content pd">
      <mh-header headName="绑定账号"> </mh-header>
      <div class="with-amount">
        <label v-if='type==1'>支付宝账号</label>
        <label v-else>微信账号</label>
        <div class="input-row flex">
          <input type="text" class="input-amount" v-model="account" placeholder="请输入微信账号" maxlength="20">
        </div>
      </div>
      <div class="with-amount">
        <label>真实姓名</label>
        <div class="input-row flex">
          <input type="text" class="input-amount" v-model="name" placeholder="请输入真实姓名" maxlength="20">
        </div>
      </div>
      <p class="msg-tip bg-w">绑定需进行短信验证</p>
      <p class="phone bg-w">{{phone}}</p>
      <div class="phone-row flex-bt bg-w">
        <input type="text" placeholder="请输入验证码" v-model="code">
        <button v-if='codeFlag' type="button" class="mh-btn send-btn" @tap='getCode'>获取验证码</button>
        <span v-else class="mh-btn send-btn btn-cur">重新获取{{time}}s</span>
      </div>
      <div class="btn-row bg-w mh-pd">
        <button type="button" class="mui-btn-block btn-with" @tap='submit'>提交绑定</button>
      </div>
    </section>
  </transition>
</template>

<script>
  import MhHeader from '@/components/mh-header/mh-header'
  import {MH_API} from "@/api/api";
  export default {
    name: "withdraw",
    data () {
      return {
        withAmount: 500.00,
        count: 0,
        phone: '',
        time: 60,
        codeFlag: true,
        dayFlag: false,
        type: 1,
        account: '',
        name: '',
        code: ''
      }
    },
    components: {
      MhHeader
    },
    methods: {
      getCode(){
        let self = this;
        MH_API.sendCode({
          phone: self.phone
        }).then(res => {
          //if (res.code === 200) {
            self.codeFlag = false;
            mui.toast("发送成功");
            let time = self.time;
            let timer = setInterval(function(){
              --time;
              if(time==0){
                time = 60;
                clearInterval(timer);
                self.codeFlag = true;
              }
              self.time = time;
            }, 1000)
          //}
        })
      },
      submit(){
        let self = this;
        MH_API.bindAccount({
          contacts: self.phone,
          type: this.type,
          account: self.account,
          real_name: self.name,
          code: self.code
        }).then(res => {
          if (res.status == 200) {
            mui.toast("绑定成功");
            setTimeout(function(){
              self.$router.go(-1)
            }, 1500)
          }
          else{
            mui.toast(res.msg);
          }
        })
      }
    },
    created(){
      let phone = window.localStorage.getItem("phone");
      this.phone = phone;
      let type = this.$route.query.type;
      this.type = type;
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../../assets/css/mixin";
  .account {
    position: relative;
    padding: 1.5rem 1rem;
    background-color: #fff;
    border-bottom: 1px solid #eee;
    .account-type {margin-right: 25px;}
  }
  .with-amount {
    padding: 1rem 0 1rem 1rem;
    background-color: #fff;
    label {@include sc(1.4rem, #666); }
  }
  .input-row {
    margin-top: 0;
    border-bottom: 1px solid #eee;
    span {@include sc(1.8rem, #666);}
    input {
      margin: 0 1rem 0 0;
      @include sc(1.6rem, #333);
      border: 0;
    }
  }
  .can-with {@include sc(1.2rem, #666);}
  .with-tip { @include sc(1.2rem, #e43a3a);}
  .msg-tip {
    @include sc(1.2rem, #666);
    &:before {
      margin: 0 .4rem 0 1rem;
      content: '*';
      @include sc(1.2rem, #e685aa);
    }
  }
  .phone-row {
    padding: 0 1rem;
    border-bottom: 1px solid #eee;
    input {
      margin: 0 .5rem 0 0;
      padding-left: 1rem;
      font-size: 1.6rem;
      border: 0; width:25rem;
    }
  }
  .phone {
    padding: 1rem;
    font-weight: bold;
    @include sc(1.4rem, #333);
  }
  .send-btn {
    padding: .6rem 0.8rem;
    font-size: 1.4rem;
  }
  .btn-row {padding-top: 3rem;}
  .btn-with {
    background-color: #f26c60;
    color: #fff;
  }
  .btn-dis {
    background-color: #ddd;
    color: #333;
  }
  .btn-cur{ background-color:#ccc;}
</style>
